// 定义变量（可单独放在 _variables.scss 中）
$btn-primary-color: rgb(8, 108, 253);
$btn-secondary-color: #34a853;
$btn-danger-color: #ea4335;
$btn-padding: 8px 16px;
$btn-border-radius: 15px;
$btn-font-size: 14px;
$btn-text-color:white;
$btn-transition: all 0.3s ease;

// 基础按钮样式（使用占位符 % 避免未使用时编译到 CSS）
.btn-base {
  background-color: $btn-primary-color;
  display: inline-block;
  padding: $btn-padding;
  font-size: $btn-font-size;
  border-radius: $btn-border-radius;
  border: none;
  cursor: pointer;
  transition: $btn-transition;
  text-align: center;
  text-decoration: none;
  color:$btn-text-color;

  // &:hover {
  //   opacity: 0.9;
  //   transform: translateY(-2px);
  // }

  // &:active {
  //   transform: translateY(0);
  // }

  // &:disabled {
  //   cursor: not-allowed;
  //   opacity: 0.6;
  //   transform: none;
  // }
}

// 主要按钮（继承基础样式）
.btn-primary {
  @extend .btn-base;
  background-color: $btn-primary-color;
  color: white;

  &:hover {
    box-shadow: 0 4px 8px rgba($btn-primary-color, 0.3);
  }
}

// 次要按钮
.btn-secondary {
  @extend .btn-base;
  background-color: $btn-secondary-color;
  color: white;

  &:hover {
    box-shadow: 0 4px 8px rgba($btn-secondary-color, 0.3);
  }
}

// 危险按钮
.btn-danger {
  @extend .btn-base;
  background-color: $btn-danger-color;
  color: white;
}

//  Outline 按钮（透明背景）
.btn-outline {
  @extend .btn-base;
  background-color: transparent;
  border: 1px solid $btn-primary-color;
  color: $btn-primary-color;

  &:hover {
    background-color: $btn-primary-color;
    color: white;
  }
}

